import React, { useEffect, useState } from 'react';
import Nav from '../../../components/Nav/Nav';
import '@/views/Index/Datazhibo/Datazhibo.scss'
import * as service from '../../../api/wy'
import type { ColumnsType } from 'antd/es/table';
import { Table, Button, Space, DatePicker } from 'antd';
import * as echarts from 'echarts';
import { useNavigate } from 'react-router-dom';


interface Props {

}
// 用户直播表格数据
interface DataType1 {
    key: React.Key;
    name: string;
    phone: string;
    time: string;
    dianzan: string;
    pinglun: string;
    dashang: string;
    youhui: string;
    number: string;
    price: string;
    starttime: string;
    recenttime: string;
}

// 商品数据表格
interface DataType2 {
    key: React.Key;
    promsg: string;
    price: string;
    clicks: string;
    clicksperson: string;
    deal: string;
    salescount: string;
    turnover: string;
}

// 优惠券数据
interface DataType3 {
    key: React.Key;
    name: string;
    type: string;
    scope: string;
    received: string;
    peoplenum: string;
    residue: string;
    used: string;
}

function Datazhibo(props: Props) {

    const { RangePicker } = DatePicker;

    var navigate = useNavigate()

    // 定义Echarts
    var myChart: any = null;

    const echartslist = async () => {
        const res = await service.echartsdata();
        console.log(res)
        res.data?.map((item: any) => {
            item.key = item.id
        })

        let datax = res.data.map((item: any) => {
            return item.datax
        })
        let x = res.data.map((item: any) => {
            return item.x
        })

        draw(datax, x);
        //实例化echarts
    }
    // 图表绘制
    var draw = (datax: any, x: any) => {
        // 绘制图表
        myChart.setOption({
            backgroundColor: "#fff",
            
            xAxis: { //x轴设置
                data: x
            },
            yAxis: [{ // 纵轴标尺固定
                type: 'value',
                scale: true,
                max: 1250,
                min: 0,
                splitNumber: 5,
                // boundaryGap: [0.2, 0.2]
            }],
            calculable: true,
            series: [ //数据系列
                {
                    type: 'line',//'line' , 'bar' , 'pie'
                    data: datax,
                    symbolSize: 0, //圆点大小
                    smooth: true, //是否平滑曲线显示
                    itemStyle: {
                        normal: {
                            color: 'blue', //折线颜色
                        }
                    }

                },
            ]
        });
    }


    // 定义表格数据
    let [tableData, setTableData] = useState<DataType1[]>([])//定义用户直播数据表格数据

    let [datalist, setdatalist] = useState([]);//定义数据总览的数据

    let [producttable, setProducttable] = useState<DataType2[]>([])//定义商品数据表格数据

    let [discountstable, setDiscountstable] = useState<DataType3[]>([])//定义优惠券表格数据



    //  获取数据总览数据 
    var tatallist = async () => {
        var res = await service.zhibodatalist()
        console.log(res.data);
        setdatalist(res.data);
    }
    // 获取echarts图表数据 
    // var echartslist = async () => {
    //     var res = await service.echartsdata()
    //     console.log(res.data);
    //     setecharts(res.data);
    // }
    // 获取用户直播数据列表
    var userslist = async () => {
        var res = await service.zhibouserslist()
        console.log(res.data);
        setTableData(res.data);
    }
    // 获取商品数据列表
    var productlist = async () => {
        var res = await service.productlist()
        console.log(res.data);
        setProducttable(res.data);
    }
    // 获取优惠券数据列表
    var discountslist = async () => {
        var res = await service.discountslist()
        console.log(res.data);
        setDiscountstable(res.data)
    }

    useEffect(() => {
        myChart = echarts.init(document.getElementById('charts') || document.body);
        tatallist();
        userslist();
        productlist();
        discountslist();
        echartslist();
    }, [])

    // 点击返回，跳转到直播列表页面
    var tozhibo = () => {
        navigate('/index/livestreaming')
    }


    // 用户直播数据列表数据
    const columns1: ColumnsType<DataType1> = [
        {
            title: '用户信息', //表格列的标题
            dataIndex: 'name', //数据索引( 属性名 )
            key: 'name',
            width: '180px',
            className: 'tuwen',
            // ellipsis:true,
            render: (_, record) => {
                return (
                    <div className='xinxi' style={{
                        display: 'flex'
                    }}>
                        <img src="https://cdn7.axureshop.com/demo/1903216/images/%E7%9B%B4%E6%92%AD%E6%95%B0%E6%8D%AE/u2428.svg" />
                        <div className="msg" style={{
                            width: 150,
                            marginLeft: 10,
                        }}>
                            <div className='name'>{record.name}</div>
                            <div className='phone'>{record.phone}</div>
                        </div>
                    </div>
                )
            }
        },
        {
            title: '累计观看时长', //表格列的标题
            dataIndex: 'time', //数据索引( 属性名 )
            key: 'time',
            width: '140px',
            render: (_, record) => <p>{record.time}</p>,//动态渲染标签/组件
        },
        {
            title: '点赞', //表格列的标题
            dataIndex: 'dainzan', //数据索引( 属性名 )
            key: 'dianzan',
            width: '50px',
            render: (_, record) => <p>{record.dianzan}</p>,//动态渲染标签/组件
        },
        {
            title: '评论', //表格列的标题
            dataIndex: 'pinglun', //数据索引( 属性名 )
            key: 'pinglun',
            width: '50px',
            render: (_, record) => <p>{record.pinglun}</p>,//动态渲染标签/组件
        },
        {
            title: '打赏（元）', //表格列的标题
            dataIndex: 'dashang', //数据索引( 属性名 )
            key: 'dashang',
            width: '80px',
            render: (_, record) => <p>{record.dashang}</p>,//动态渲染标签/组件
        },
        {
            title: '领取优惠券', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'youhui',
            width: '100px',
            render: (_, record) => <p>{record.youhui}</p>,//动态渲染标签/组件
        },
        {
            title: '购买商品数量', //表格列的标题
            // dataIndex: 'isseckill', //数据索引( 属性名 )
            key: 'number',
            width: '100px',
            render: (_, record) => <p>{record.number}</p>,//动态渲染标签/组件
        },
        {
            title: '购买商品金额', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'price',
            width: '80px',
            render: (_, record) => <p>{record.price}</p>,//动态渲染标签/组件
        },
        {
            title: '首次进入直播间时间', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'starttime',
            width: '170px',
            render: (_, record) => <p>{record.starttime}</p>,//动态渲染标签/组件
        },
        {
            title: '最近进入直播间时间', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'recenttime',
            width: '170px',
            render: (_, record) => <p>{record.recenttime}</p>,//动态渲染标签/组件
        }
    ]

    // 商品数据表格列表数据
    const columns2: ColumnsType<DataType2> = [
        {
            title: '商品信息', //表格列的标题
            dataIndex: 'promsg', //数据索引( 属性名 )
            key: 'promsg',
            width: '220px',
            // ellipsis:true,
            render: (_, record) => {
                return (
                    <div className='xinxi' style={{
                        display: 'flex',
                        alignItems: 'center'
                    }}>
                        <img src="https://cdn7.axureshop.com/demo/1903216/images/%E6%96%B0%E5%A2%9E%E7%9B%B4%E6%92%AD/u1648.png" style={{ width: 50, marginRight: 10 }} />
                        <div>{record.promsg}</div>
                    </div>
                )
            }
        },
        {
            title: '商品价格（元）', //表格列的标题
            dataIndex: 'price', //数据索引( 属性名 )
            key: 'price',
            width: '120px',
            render: (_, record) => <p>{record.price}</p>,//动态渲染标签/组件
        },
        {
            title: '点击次数', //表格列的标题
            dataIndex: 'clicks', //数据索引( 属性名 )
            key: 'clicks',
            width: '120px',
            render: (_, record) => <p>{record.clicks}</p>,//动态渲染标签/组件
        },
        {
            title: '点击人数', //表格列的标题
            dataIndex: 'clicksperson', //数据索引( 属性名 )
            key: 'clicksperson',
            width: '120px',
            render: (_, record) => <p>{record.clicksperson}</p>,//动态渲染标签/组件
        },
        {
            title: '成交人数', //表格列的标题
            dataIndex: 'deal', //数据索引( 属性名 )
            key: 'deal',
            width: '120px',
            render: (_, record) => <p>{record.deal}</p>,//动态渲染标签/组件
        },
        {
            title: '销量', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'salescount',
            width: '100px',
            render: (_, record) => <p>{record.salescount}</p>,//动态渲染标签/组件
        },
        {
            title: '成交金额', //表格列的标题
            // dataIndex: 'isseckill', //数据索引( 属性名 )
            key: 'turnover',
            width: '140px',
            render: (_, record) => <p>{record.turnover}</p>,//动态渲染标签/组件
        }
    ]

    // 优惠券表格列表数据
    const columns3: ColumnsType<DataType3> = [
        {
            title: '优惠券名称', //表格列的标题
            dataIndex: 'name', //数据索引( 属性名 )
            key: 'name',
            width: '220px',
            // ellipsis:true,
            render: (_, record) => {
                return (
                    <div>{record.name}</div>
                )
            }
        },
        {
            title: '优惠券类型', //表格列的标题
            dataIndex: 'type', //数据索引( 属性名 )
            key: 'type',
            width: '120px',
            render: (_, record) => <p>{record.type}</p>,//动态渲染标签/组件
        },
        {
            title: '使用范围', //表格列的标题
            dataIndex: 'scope', //数据索引( 属性名 )
            key: 'scope',
            width: '120px',
            render: (_, record) => <p>{record.scope}</p>,//动态渲染标签/组件
        },
        {
            title: '已领取张数', //表格列的标题
            dataIndex: 'received', //数据索引( 属性名 )
            key: 'received',
            width: '120px',
            render: (_, record) => <p>{record.received}</p>,//动态渲染标签/组件
        },
        {
            title: '已领取人数', //表格列的标题
            dataIndex: 'peoplenum', //数据索引( 属性名 )
            key: 'peoplenum',
            width: '120px',
            render: (_, record) => <p>{record.peoplenum}</p>,//动态渲染标签/组件
        },
        {
            title: '剩余张数', //表格列的标题
            // dataIndex: 'issale', //数据索引( 属性名 )
            key: 'residue',
            width: '100px',
            render: (_, record) => <p>{record.residue}</p>,//动态渲染标签/组件
        },
        {
            title: '使用张数', //表格列的标题
            // dataIndex: 'isseckill', //数据索引( 属性名 )
            key: 'used',
            width: '140px',
            render: (_, record) => <p>{record.used}</p>,//动态渲染标签/组件
        }
    ]

    return (
        <div className='datazhibo'>
            <Nav />
            {/* 数据总览 */}
            <div className="alldata">
                <div className="name">数据总览</div>
                <div className="list">
                    {
                        datalist.map((item: any) => {
                            return (
                                <div className="box1">
                                    <div className="title">{item.text}</div>
                                    <div className="num">{item.number}</div>
                                </div>
                            )
                        })

                    }

                </div>
            </div>
            {/* Echarts图表 */}
            <div className="bigbox">
                <div className="timu">
                    <div className="renshu">在线人数</div>
                    <div className="date">
                        统计日期
                        <Space className='space' direction="vertical" size={12} >
                            <RangePicker />
                        </Space>
                    </div>
                    <div className="tip">
                        <span>今日</span>
                        <span>昨日</span>
                        <span>最近7天</span>
                        <span>最近30天</span>
                    </div>
                </div>
                <div id='charts'></div>
            </div>
            {/* 用户直播数据 */}
            <div className="usersdata">
                <div className="one">
                    <div className="left">直播用户数据</div>
                    <Button className="right">批量导出</Button>
                </div>
                <div className="table">
                    <Table columns={columns1} dataSource={tableData} pagination={{ pageSize: 5 }} />
                </div>
            </div>
            {/* 商品数据 */}
            <div className="product">
                <div className="lineone">
                    <div className="left">商品数据</div>
                    <Button className="right">批量导出</Button>
                </div>
                <div className="table">
                    <Table columns={columns2} dataSource={producttable} pagination={{ pageSize: 5 }} />
                </div>
            </div>
            {/* 优惠券数据 */}
            <div className="discounts">
                <div className="lineone">
                    <div className="left">优惠券数据</div>
                    <Button className="right">批量导出</Button>
                </div>
                <div className="table">
                    <Table columns={columns3} dataSource={discountstable} pagination={{ pageSize: 5 }} />
                </div>
                <Button onClick={tozhibo}>返回</Button>
            </div>
        </div>
    );
}

export default Datazhibo;